<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="layui/layui.js"></script>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
	<title></title>
</head>
<body>
	<!-- 测试按钮组件 -->
	<!-- 文档中说明是任何一个组件 
		我们常用的组件之中有三种
		[1]div这样的,我们就是需要一个按钮的样式而已
		[2]a连接,我们需要能够进行页面的跳转功能
		[3]button 按钮组件,我们希望能提交表单
	-->
	<div class="layui-btn">按钮</div>
	<a href="http://www.baidu.com" class="layui-btn">a链接</a>


	<!-- 按钮的样式
		[1]颜色
		[2]大小
		[3]元素类型

		[1]颜色
		 内置的颜色
	 -->
	 <p>按钮的颜色</p><hr>
	 <div class="layui-btn layui-btn-primary">primary</div>
	 <div class="layui-btn">默认</div>
	 <div class="layui-btn layui-btn-danger">danger红色的</div>
	 <div class="layui-btn layui-btn-warm">warm 橘黄色</div>
	 <div class="layui-btn layui-btn-normal">normal 蓝色的</div>
	 <div class="layui-btn layui-btn-disabled">disabled 禁用状态</div>

	 <p>按钮的大小</p>
	 <div class="layui-btn layui-btn-lg">大按钮</div>
	 <div class="layui-btn layui-btn-sm">小按钮</div>
	 <div class="layui-btn layui-btn-xs">迷你按钮</div>
	 <div class="layui-btn">默认按钮</div>

	 <p>按钮类型(内联还是块状元素)</p>
	 <button class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
	 <button class="layui-btn">一般的按钮</button>

	 <p>圆角按钮</p>
	 <div class="layui-btn layui-btn-radius">圆角按钮</div>

	 <p>带图标的按钮[实际上就是显示按钮之中的内容]</p>
	 <button class="layui-btn">
	  	<i class="layui-icon">&#xe608;</i> 添加
	 </button>

	 <button class="layui-btn">
	  	<i class="layui-icon layui-icon-username"></i>用户
	 </button>

	 <p>按钮组</p>
	 <div class="layui-btn-group">
	  <button class="layui-btn">增加</button>
	  <button class="layui-btn">编辑</button>
	  <button class="layui-btn">删除</button>
	 </div>

	 <p>按钮容器[比起按钮组来说,就是中间多了间距的概念]</p>
	 <div class="layui-btn-container">
	  <button class="layui-btn">按钮一</button> 
	  <button class="layui-btn">按钮二</button> 
	  <button class="layui-btn">按钮三</button> 
	 </div>
</body>
</html>